<template>
  <div>
    <el-row>
      <el-col :span="24" style="margin-bottom: 20px">
        <span>{{stationTitle}}  </span>
        <span>通道：{{cameraId}}   </span>
        <el-date-picker
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          format="yyyy-MM-dd HH:mm"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary">搜索</el-button>
        <el-button type="success">
          <a class="download" :href='mainUrl' download=""  title="下载">下载当前</a>
          </el-button>
        <el-button type="success">下载所有</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-image
          style="width: 800px; height: 400px"
          :src="mainUrl"
          fit="fill ">
        </el-image>
        <el-carousel
          :loop="false"
          :autoplay="false"
          trigger="click"
          @change="changeImg"
          indicator-position="none"
          type="card"
          height="100px">
          <el-carousel-item v-for="item in imgList" :key="item.url" :name="item.url" >
            <el-image
              style="width: 100px; height: 100px"
              :src="item.url"
              fit="fill "></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'imgItem',
  components: {},
  data () {
    return {
      stationTitle: '修文电站',
      cameraId: '34020000001110000851',
      time: [],
      imgList: [{
        url: '1111',
        title: '图片1'
      }, {
        url: '2222',
        title: '图片1'
      }, {
        url: '3333',
        title: '图片1'
      }, {
        url: '444',
        title: '图片1'
      }],
      mainUrl: ''
    }
  },
  created () {
    this.time[0] = moment(new Date()).add(-7, 'days').format()
    this.time[1] = moment(new Date()).format()
  },
  methods: {
    changeImg (index) {
      this.mainUrl = this.imgList[index].url
      console.log(this.mainUrl)
    }
  }
}
</script>

<style lang="less">
  .download {
    text-decoration-line: none;
    color: #ffffff;
  }
</style>
